<template>
  <div>
    <el-select v-model="condition" style="margin-right: 50px;margin-left: 150px">
      <el-option
        v-for="item in yearOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
    <ChartYear style="height: 700px;margin-top: 60px" :data="num"></ChartYear>
  </div>
</template>
<script>
import ChartYear from "@/views/chart/ChartYear";
import {yearStatics} from "@/api/reservation";

export default {
  name:"ChartYearStatics",
  components: {ChartYear},
  data(){
    return{
      num:[0,0,0,0,0,0,0,0,0,0,0,0],
      yearOptions: [
        {
          value: '2017',
          label: '2017'
        }, {
          value: '2018',
          label: '2018'
        }, {
          value: '2019',
          label: '2019'
        }, {
          value: '2020',
          label: '2020'
        }, {
          value: '2021',
          label: '2021'
        }, {
          value: '2022',
          label: '2022'
        }, {
          value: '2023',
          label: '2023'
        }, {
          value: '2024',
          label: '2024'
        }],
      condition:"",
    }
  },
  methods:{
    query(){
      yearStatics({year:this.condition})
      .then(response =>{
        if (response.success) {
          this.num = response.data;
        }
      }).catch((e) => {
          _this.$message.error(e, "出现未知错误");
        })
    }
  }
}
</script>
